<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-25 10:10:29
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--光源和阴影-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "../case/helper/AxesHelper";
import { CameraHelper } from "../case/helper/CameraHelper";
import { WebGLRenderer } from "../create/renderer";
import { OrbitControlsHelper } from "../case/helper/OrbitControls";
import { PerspectiveCamera } from "../create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
AxesHelper(THREE, scene);
onMounted(() => {
	let container = document.getElementById("three_container");

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		4000
	);
	camera.position.z = 200;
	camera.position.y = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);

	const ambient = new THREE.AmbientLight({ color: 0xffffff });
	scene.add(ambient);
	Geometry();
	SpotLight();
	DirectionalLight();
	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
});
const Geometry = () => {
	const geometry = new THREE.PlaneGeometry(200, 200);
	const material = new THREE.MeshLambertMaterial({ color: 0x999999 });
	const mesh = new THREE.Mesh(geometry, material);
	mesh.receiveShadow = true;
	mesh.rotateX(-Math.PI / 2);
	scene.add(mesh);
	//----
	const geometryBox = new THREE.BoxGeometry(40, 40, 40);
	const materialBox = new THREE.MeshLambertMaterial({ color: 0x888888 });
	const meshBox = new THREE.Mesh(geometryBox, materialBox);
	meshBox.position.y = 20;
	meshBox.castShadow = true;
	scene.add(meshBox);
};
/**
 * 聚光灯
 */
const SpotLight = () => {
	const spotLight = new THREE.SpotLight(0xffffff, 100.0);
	// 设置聚光光源位置
	spotLight.position.set(0, 100, 0);
	//光源衰减
	spotLight.decay = 1.0;
	// 设置聚光光源发散角度
	spotLight.angle = Math.PI / 6; //光锥角度的二分之一
	//聚光源目标对象.target
	spotLight.target.position.set(50, 0, 0);
	spotLight.castShadow = true;
	scene.add(spotLight);

	const SpotLightHelper = new THREE.SpotLightHelper(spotLight);
	scene.add(SpotLightHelper);
};
/**
 * 平行光
 */
const DirectionalLight = () => {
	const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
	directionalLight.castShadow = true;
	directionalLight.position.set(0, 100, 100);
	// 设置三维场景计算阴影的范围
	directionalLight.shadow.camera.left = -50;
	directionalLight.shadow.camera.right = 50;
	directionalLight.shadow.camera.top = 200;
	directionalLight.shadow.camera.bottom = -100;
	directionalLight.shadow.camera.near = 0.5;
	directionalLight.shadow.camera.far = 600;
	directionalLight.shadow.radius = 3;
	// 查看平行光阴影相机属性
	console.log("阴影相机属性", directionalLight.shadow.camera);
	scene.add(directionalLight);
	// //-
	// // 可视化平行光阴影对应的正投影相机对象
	// const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
	// scene.add(cameraHelper);

	//-
	const directionalLightHelper = new THREE.DirectionalLightHelper(
		directionalLight,
		10
	);
	scene.add(directionalLightHelper);
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
</style>
